/* eslint-disable react/jsx-pascal-case */
import React from "react";
import Tabbar from '../tabbar'
import { Search } from '@react-vant/icons'

const Categoryindex = () => {
    let navigate = React.$router.useNavigate();
    const [rotation, setrotation] = React.useState([])
    const [categorylist, setcategorylist] = React.useState([])
    const [finished, setfinished] = React.useState(false)
    const [loading, setloading] = React.useState(false)
    const [page, setPage] = React.useState(1)

    const TabRight = () => {
        console.log('----')
    }

    const onRefresh = () => {
        setcategorylist([])
        setPage(1)
        setfinished(false)
        return new Promise(resolve => {
            setTimeout(() => {
                getListData()
                React.$Vant.Toast.info('刷新成功')
                resolve(true)
            }, 1000)
        })
    }

    const load = () => {
        setfinished(true)
        setloading(true)
        getListData()
    }

    const getListData = async () => {
        let data = {
            page: page
        }
        let result = await React.$api.categoryindex(data)
        if (result && result.code == 1) {
            console.log(result);
            var list = [...categorylist, ...result.data.categorylist.data]
            setrotation(result.data.rotation)
            setcategorylist(list)
            setPage(page + 1)
            setTimeout(() =>{
                setfinished(false)
                setloading(false)
            }, 2000)
        } else {
            setfinished(true)
            React.$Vant.Toast.info(result.msg)
            return false
        }
    }

    return (
        <>
            <React.$Vant.NavBar
                title='学术'
                onClickLeft={() => navigate(-1)}
                rightText={<Search fontSize={20} />}
                onClickRight={() => navigate('/business/category/search')}
            />

            {/* 轮播 */}
            <div className="banner_shouy">
                <React.$Vant.Swiper>
                    {rotation.map((item) => (
                        <React.$Vant.Swiper.Item key={item.id} autoplay={5000}>
                            <React.$Vant.Image src={item.image_text} />
                        </React.$Vant.Swiper.Item>
                    ))}
                </React.$Vant.Swiper>
            </div>

            <React.$Vant.PullRefresh
                onRefresh={() => onRefresh(true)}
            >
                <React.$Vant.List className="catelist" finished={finished} onLoad={load} offset={5} loading={loading}>
                    {
                        categorylist.map((item) => {
                            return (
                                <div className='item'  key={item.id}>
                                    <React.$router.NavLink to={`/business/category/info?pid=${item.id}`}>
                                        <img src={item.image_text} alt="" />
                                        <div className="right">
                                            <p>{item.name}</p>
                                            <span>{item.createtime}</span>
                                        </div>
                                    </React.$router.NavLink>
                                </div>
                            )
                        })
                    }
                </React.$Vant.List>
            </React.$Vant.PullRefresh>
            <div style={{height:'.75rem'}}></div>
            <Tabbar />
        </>
    )
}

export default Categoryindex